<template>
<!--  饼图-->
  <div class="a"><div class="a" ref="chart" style="width:100%;height:300px"></div></div>


</template>

<script>
export default {
  name: "pieHome",
  props:{
    inFor:{
      type:Array,
      default() {
        return [];
      }
    },
    URL:{
      type:Number,
      default() {
        return null;
      }
    }
  },
  mounted() {
   this.setI2 = setInterval(this.getEchartData,1500)
  },
  beforeDestroy() {
    clearInterval(this.setI1)
    clearInterval(this.setI2)
  },
  data(){
    return{
      setI1:"",
      setI2:"",
    }
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
          title:{
            text:"打卡情况",
            textStyle: {
              color: "cyan"
            }
          },
          legend: {
            // top: '80%',
            textStyle:{
              color:'white'
            }
          },
          tooltip:{
            trigger:"item"
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              name: '个人',
              type: 'pie',
              radius:'60%',
              center: ['50%', '50%'],
              itemStyle: {
                borderRadius: 5
              },
              data: [
                { value: this.inFor[this.URL].normal, name: '正常' },
                { value: this.inFor[this.URL].beLate, name: '迟到' },
                { value: this.inFor[this.URL].absence, name: '旷勤' },
                { value: this.inFor[this.URL].askForLeave, name: '请假' }
              ],
              color:["cyan","orange","red","gray"]
            }
          ]
        };

        myChart.setOption(option);
        //当窗口发送变化的时候，改变图表的大小
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      //防止多次触发窗口发送变化
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>

<style scoped>
/*.a{*/
/*  border: 1px solid cyan;*/
/*  box-shadow: 1px 1px 10px cyan;*/
/*  width: 40%;*/
/*  height: 378px;*/
/*}*/
</style>
